<template>
	<view class="pageBg">
		<!-- 顶部导航栏 -->
		<view class="w100 bg_w"><fr-top-nav :showBack="true" :showTitle="true" :showSignIn="true" :bgColor="'#FFF'" /></view>
		<view class="topTab bg_w flex_r_sb_c">
			<block v-for="(item, index) in tabList" :key="index">
				<view class="tabItem flex_c_fs_c" @click="selectTab(item)">
					<text class="f_28" :class="item.value === curTag?'fw_600 tc_1':'fw_400 tc_5'">{{item.name}}</text>
					<view v-if="item.value === curTag" class="tabLine"></view>
				</view>
			</block>
		</view>
		<view class="container">
			<scroll-view scroll-y="true"
			@scrolltolower="scrolltolower"
			refresher-enabled="true"
			:refresher-triggered="refresherTriggered"
			@refresherrefresh="refresherrefresh"
			@refresherrestore="refresherrestore"
			@refresherabort="refresherabort"
			:style="{
				height: scrollHeight + 'px',
				width: '750rpx'}"
			>
				<view class="inner">
					<view v-if="!lastPage" class="noData f_36 tc_c flex_c_c_c">
						<text class="iconfont iconnoData margin_b24" style="font-size:180rpx;"></text>
						<text>木有数据呢~~</text>
					</view>
					<block v-for="(item, index) in list" :key="item.id">
						<view class="listItem flex_r_sb_c">
							<text class="f_40 fw_600 tc_1">NO.{{item.id}}</text>
							<text class="iconfont iconrightArrow f_40"></text>
						</view>
					</block>
					<view v-if="noMore" class="noMore f_28 tc_c flex_r_c_c">
						<text>木有了呢~~(〃'▽'〃)</text>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sysInfo: this.$tool.sysInfo(),
				scrollHeight: '',
				tabList: [
					{ name: '全部', value: 1 },
					{ name: '进行中', value: 2 },
					{ name: '已完成', value: 3 },
					{ name: '已过期', value: 4 },
				],
				curTag: 1,
				list: [],
				refresh: true,
				noMore: false,
				curPage: 1,
				lastPage: 0,
				total: 0,
				refresherTriggered: false,
				_refresherTriggered: false
			};
		},
		onLoad() {
			this.setScrollHeight()
			this.getData()
		},
		onShow() {},
		methods: {
			getData(isNextPage) {
				isNextPage ? ++this.curPage : this.curPage = 1
				
				// 模仿请求数据
				this.lastPage = 2
				if(!this.lastPage) {
					return
				}
				let starNum = this.list.length>0 ? this.list[this.list.length-1].id + 1 : 1
				for(let i=0; i<15; i++) {
					this.list.push({
						id: starNum
					})
					++starNum
				}
				
				setTimeout(() => {
					// 没有请求的话下拉刷新与取消同时触发无法使loading消失, 需要延迟
					// 正常接口无需延迟
					this.refresherTriggered = false
					this._refresherTriggered = false
				}, 1500)
			},
			setScrollHeight() {
				let sys = uni.getSystemInfoSync()
				let wh = sys.windowHeight
				let hei = this.sysInfo.height + 44 + 8
				let topHei = Math.floor(this.sysInfo.rpx * hei * 2)
				let scrollHeight = wh - topHei
				this.scrollHeight = scrollHeight
			},
			scrolltolower() {
				if(this.lastPage === 0) {
					return
				}
				if(this.curPage !== this.lastPage) {
					this.getData(true)
				} else {
					this.noMore = true
				}
			},
			refresherrefresh() {
				// 自定义下拉刷新被触发
				let _this = this;
				if (_this._refresherTriggered) {
					return
				}
				_this._refresherTriggered = true;
				// 界面下拉触发，triggered可能不是true，要设为true
				if (!_this.refresherTriggered) {
					_this.refresherTriggered = true
				}
				this.getData()
			},
			refresherrestore() {
				// 自定义下拉刷新被复位
				let _this = this
				_this.refresherTriggered = false
				_this._refresherTriggered = false
			},
			refresherabort() {
				// 自定义下拉刷新被中止
				let _this = this
				_this.refresherTriggered = false
				_this._refresherTriggered = false
			},
			selectTab(e) {
				if(this.curTag !== e.value) {
					this.curTag = e.value
					this.getData()
				}
			},
		},
	}
</script>

<style lang="scss">
page {
	background-color: #F8F8F8;
	height: 100%;
}
</style>
<style lang="scss" scoped>
.pageBg {
	.topTab {
		width: 100%;
		height: 88rpx;
		padding: 0 48rpx;
		box-sizing: border-box;
		.tabItem {
			height: 50rpx;
			.tabLine {
				width: 24rpx;
				height: 4rpx;
				background: #55ac6b;
			}
		}
	}
	.container {
		padding-top: 16rpx;
		box-sizing: border-box;
		.inner {
			.listItem {
				width: 100%;
				height: 120rpx;
				background-color: #FFF;
				padding: 0 28rpx;
				box-sizing: border-box;
				margin-bottom: 2rpx;
			}
		}
	}
}
</style>
